<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p>
    <p></p>
</div>
<!-- 这个挂载点一旦被vm挂载，那么内部就不是我们单纯的html，被称作模板 -->
<!-- 模板是由两部分组成  html + js -->
<!-- 模板语法 指令和插值-->
<!-- 指令是用来修改模板当中标签的（属性 内容  样式） -->
<!-- 插值是专门用来修改模板当中标签的内容的 {{}} -->

<script src="js/vue.js"></script>
<script>
    //1.引入vue.js
    //2.在body当中必须写一个挂载点
    //3.实例化一个vue的实例化对象 和挂载点进行挂着
    //4、请求获取回来的数据，是配置对象当中的data

    //函数首先是函数  函数还是函数对象
    //函数是有两个角色  函数可以当函数用()  也可以当对象去用  函数.属性
    //函数当函数用可以有多种用法：
    // 1、普通函数调用  直接()                   this 代表   window
    // 2、构造函数调用  new + ()                 this 代表   实例化对象
    // 3、方法         a.b()                    this 代表   调用的方法的对象
    // 4、回调函数     自己不用系统调用           this 代表   事件的回调代表事件源
    // 5、call apply   让一个对象借用另外一个对象的方法   this 代表 自己给定的对象
    // 6、箭头函数                              this 代表  外层执行上下文的this
    const vm=new Vue({
        el:'#app',//被称作挂载点 本质上是一个css的选择器字符串，标识着vm要和谁去绑定挂载
        data:{
            msg:'good morning!'
        }
    });
    //vm对象和传递的配置对象是不是同一个
    //不是同一个对象
    //数据代理：使用vm代理了配置对象当中data的数据 ，vm身上也有和data当中同名的属性，模板当中访问的都是vm身上的属性
    //vm代理了data当中的数据，找vm获取数据其实最终还是拿的data当中的属性值
    //修改vm的数据其实本质是在修改data当中的数据
</script>
</body>
</html>